<!-- 空间页 -->
<template>
	<loading-page v-if="data.loading" />
	<template v-if="!data.loading&&data.info">
		<view class="hd">
			<view class="info">
				<view class="avatar" @click="avatar(data.info.img)">
					<lazy-load-image class="img" :image="data.info.img" :avator="true" :errorImg="config.errorImage.avator" imgMode='aspectFill' height="118rpx" borderRadius="59" />
				</view>
				<view class="name">
					<view class="basic">
						<text class="nickname">{{data.info.nickname}}</text>
						<text :class="['state',{'state-rest':!data.info.is_working}]" @click.stop="showWorkTime(data.info)">{{data.info.is_working?'服务中':'休息中'}}</text>
					</view>
					<view class="serve">
						<view class="item">
							<icon :class="['iconfont icon icon-auth','icon-auth-'+data.info.auth]">&#xe796;</icon>
							<text>{{data.info.auth==1?'个人认证':'机构认证'}}</text>
						</view>
						<view class="item">
							<icon class="iconfont icon icon-serve">&#xe63c;</icon>
							<text>服务提供商</text>
						</view>
						<view class="item" v-if="data.info.credentials&&data.info.credentials.length" @click="credentials(data.info.credentials)">
							<icon class="iconfont icon icon-credentials">&#xe6e3;</icon>
							<text>证书</text>
						</view>
					</view>
				</view>
			</view>
			<view class="record">
				<view class="item">
					<text class="label">服务评分：</text>
					<text class="value">{{data.info.score}}</text>
				</view>
				<view class="item">
					<text class="label">咨询量：</text>
					<text class="value">{{data.info.im_num>=100000?'10万+':data.info.im_num}}</text>
				</view>
				<view class="item">
					<text class="label">访问量：</text>
					<text class="value">{{data.info.space_num>=100000?'10万+':data.info.space_num}}</text>
				</view>
			</view>
			<view class="desc">
				<view class="bd" @click="data.more.open=!data.more.open">
					<text>{{desc}}</text>
					<text :class="['iconfont icon','icon-open-'+data.more.open]" v-if="data.more.show">&#xe820;</text>
				</view>
			</view>
		</view>
		<view class="tab">
			<v-tabs v-model="data.tabIndex" :tabs="data.tabList" color="#333" fontSize="32rpx" height="90rpx" :lineScale="0.3" lineHeight="4rpx" lineColor="#E1835B" paddingItem="0 30rpx" activeColor="#000" :bold="true" :lineAnimation="data.lineAnimation" @change="changeTab"></v-tabs>
		</view>
		<view class="list">
			<template v-if="dataList.length">
				<list-service :list="dataList" v-if="data.tabIndex==0" />
				<list-doc :list="dataList" v-if="data.tabIndex==1" />
			</template>
			<!-- 空数据 -->
			<empty msg="这个行业大牛有点神秘！可以直接找TA聊聊" padding="100rpx 0" v-else />
			<!-- 更多数据 -->
			<uni-load-more :status="loadMore.status" v-if="loadMore.show&&data.tabIndex==1&&!loading&&dataList.length" :contentText="loadMore.txt"></uni-load-more>
		</view>
		<view class="ft">
			<button type="default" class="btn" hover-class="btnClickStyle" @click="contact(data.info,'mobile')">
				<icon class="iconfont icon icon-mobile">&#xe76f;</icon>
			</button>
			<button type="default" class="btn" hover-class="btnClickStyle" @click="contact(data.info,'weixin')">
				<icon class="iconfont icon icon-weixin">&#xe7d5;</icon>
			</button>
			<button type="default" class="btn" hover-class="btnClickStyle" open-type="share">
				<icon class="iconfont icon icon-share">&#xe81b;</icon>
			</button>
			<button type="default" class="btn btn-im" hover-class="btnClickStyle" @click="toIm(data.info.mid,data.info.nickname)">
				<icon class="iconfont icon">&#xe78f;</icon>
				<text>免费咨询</text>
			</button>
		</view>
	</template>
	<!-- 联系提示 -->
	<popup-contact ref="popupContactRef" @toIm="toIm(data.info.mid,data.info.nickname)" />
	<!-- 登录组件 -->
	<weixin-login ref="wxLogin" />
</template>
<script setup>
	import { ref, reactive, defineComponent, computed } from 'vue';
	import { onLoad, onReady, onReachBottom } from '@dcloudio/uni-app';
	import listService from './components/list-service.vue';
	import listDoc from './components/list-doc.vue';
	import popupContact from '@/pages/find/components/popup-contact.vue';
	import useStatus from '@/common/hooks/useStatus.js';
	import useGetList from '@/common/hooks/useGetList.js';
	import config from '@/uni.config.js';
	import { removeSpace, bytesLength, cutStrByte } from '@/common/utils/index.js';
	import { tongji } from '@/common/api/common/tongji.js';
	const wxLogin = ref(null);
	const { navToCheckLogin, toIm } = useStatus(wxLogin);
	const { getDataList, dataList, loadMore, showSkeleton, loading, reachBottom } = useGetList();
	defineComponent({
		listService,
		listDoc,
		popupContact
	});
	onLoad((options) => {
		data.searchParams.mid = options.mid;
		init();
	});
	onReady(() => {
		data.lineAnimation = true;
	});
	onReachBottom(() => {
		if (data.tabIndex == 1) reachBottom();
	});
	const desc = computed(() => {
		const introduce = removeSpace(data.info.introduce);
		const maxLength = 98;
		const str = data.more.open ? introduce : bytesLength(introduce) > maxLength ? `${cutStrByte(introduce, maxLength).cutStr} ...` : introduce;
		data.more.show = bytesLength(introduce) > maxLength;
		return str;
	});
	const popupContactRef = ref(null);
	const data = reactive({
		loading: true,
		searchParams: {
			mid: '',
			table: 'service'
		},
		dataKey: 'recommend_services',
		mid: '',
		more: {
			show: false,
			open: false
		},
		tabIndex: 0,
		tabList: ['TA的服务', 'TA的文档'],
		lineAnimation: false,
		info: null,
		list: [],
		loadMore: {
			show: false,
			status: 'more',
			txt: {
				contentdown: '上拉加载更多',
				contentrefresh: '正在加载',
				contentnomore: '仅支持查看以上文档，可向作者咨询更多'
			}
		}
	});
	// 初始化数据
	async function init(showLoading = false) {
		data.searchParams.table = data.tabIndex == 0 ? 'service' : 'doc';
		data.dataKey = data.tabIndex == 0 ? 'recommend_services' : 'doc_infos';
		try {
			const res = await getDataList({
				url: '/crm/space/index',
				params: {
					...data.searchParams
				},
				showLoading,
				key: data.dataKey,
				loadMore: data.loadMore
			});
			data.info = res.merchant_infos;
		} catch (e) {}
		setTimeout(() => {
			data.loading = false;
		}, 200)
	}

	function changeTab(index) {
		data.tabIndex = index;
		dataList.value = [];
		init(true);
	}
	// 预览头像
	function avatar(img) {
		const arr = [img].map(item => item.indexOf('http') > -1 ? item : `https:${item}`);
		uni.previewImage({
			urls: arr,
			current: 0
		})
	}
	// 服务时间
	function showWorkTime(item) {
		uni.showToast({
			icon: 'none',
			title: `服务时间：${item.worktimestart}-${item.worktimeend}`
		})
	}
	// 预览证书
	function credentials(arr) {
		const newArr = arr.map(item => item.indexOf('http') > -1 ? item : `https:${item}`);
		uni.previewImage({
			urls: newArr,
			current: 0
		})
	}

	function contact(item, type) {
		type = item[type] ? type : `${type}_toim`;
		popupContactRef.value.open(item, type);
		tongji({ type: type, mid: item.mid });
	}
</script>
<style lang="scss">
	page {
		background-color: #F3F5F7;
	}
	.empty {
		padding: 150rpx 0;
		text-align: center;
		.hd {
			image {
				width: 160rpx;
			}
		}
		.bd {
			.txt {
				line-height: 46rpx;
				font-size: 26rpx;
				color: #999;
			}
		}
	}
</style>
<style scoped lang="scss">
	@import '@/common/css/base.scss';
	.tab {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 99999;
	}
	.hd {
		padding: 30rpx 34rpx 0;
		background-color: #fff;
	}
	.info {
		@include flex;
		.avatar {
			position: relative;
			width: 118rpx;
			height: 118rpx;
			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		.name {
			flex: 1;
			margin-left: 20rpx;
		}
		.basic {
			@include flex(row, flex-start);
			.nickname {
				max-width: 400rpx;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				font-weight: 700;
				font-size: 38rpx;
				color: #000;
			}
			.state {
				margin-left: 10rpx;
				padding: 6rpx 15rpx;
				border-radius: 6rpx;
				background-color: #F2F5F9;
				font-size: 24rpx;
				color: $color;
				&-rest {
					color: #aaa;
				}
			}
		}
		.serve {
			@include flex(row, flex-start);
			margin: 20rpx -12rpx 0;
			.item {
				@include flex(row, flex-start);
				padding: 0 12rpx;
			}
			text {
				font-size: 24rpx;
				color: #999;
			}
			.icon {
				margin-right: 4rpx;
				font-size: 30rpx;
				&-serve {
					color: #FF5562;
				}
				&-credentials {
					color: $color;
				}
				&-auth {
					width: 30rpx;
					height: 30rpx;
					justify-content: center;
					border-radius: 50%;
					font-size: 20rpx;
					color: #fff;
					&-1 {
						background-color: #faad14;
					}
					&-2 {
						background-color: #ff4d00;
					}
				}
			}
		}
	}
	.record {
		@include flex;
		padding: 24rpx 0;
		.item {
			min-width: 31%;
			border-right: 1px solid #ddd;
			padding-right: 10rpx;
			height: 30rpx;
			line-height: 30rpx;
			font-size: 24rpx;
			color: #888;
			.value {
				font-size: 28rpx;
				color: #000;
			}
			&:last-child {
				border-right: 0;
			}
		}
	}
	.desc {
		border-radius: 6rpx;
		padding: 10rpx 24rpx 10rpx;
		background: #F5F5F5;
		.bd {
			line-height: 44rpx;
			word-break: break-all;
			font-size: 24rpx;
			color: #666;
			.icon {
				display: inline-block;
				height: 32rpx;
				line-height: 32rpx;
				margin-left: 10rpx;
				&-open-true {
					transform: rotate(180deg);
				}
				&-open-false {
					transform: rotate(0);
				}
			}
		}
	}
	.list {
		padding-bottom: calc(constant(safe-area-inset-bottom) + 120rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
	}
	.ft {
		@include flex;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		width: 100%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #fff;
		box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, .08);
		.btn {
			@include flex(row, center);
			width: 130rpx;
			height: 100rpx;
			padding: 0;
			border-radius: 0;
			.icon {
				font-size: 50rpx;
				line-height: 1;
				&-mobile {
					color: $blue;
				}
				&-weixin {
					font-size: 58rpx;
					color: #0DBB04;
				}
				&-share {
					color: $color;
				}
			}
			&-im {
				flex: 1;
				@include flex(row, center);
				width: auto;
				background-color: $color;
				color: #fff;
				.icon {
					margin-right: 10rpx;
					font-size: 40rpx;
					color: #fff;
				}
			}
		}
	}
	.message {
		padding: 300rpx 0;
		text-align: center;
		font-size: 28rpx;
		color: #999;
	}
</style>
